<template>
  <n-drawer v-model:show="visible" :width="700" placement="right">
    <n-drawer-content title="任务日志">
      <s-container @reset="handleQueryReset" @search="handleQuery" :loading="loading">
        <template #btnBar>
          <n-button @click="handleQuery">刷新</n-button>
        </template>
        <template #dataTable>
            <s-data-table :list="list" v-model:pageObj="pageObj"  :columns="columns" :loading="loading" :bordered="false"	/>
        </template>
      </s-container>
    </n-drawer-content>
  </n-drawer>

</template>

<script setup lang="tsx">
import { DataTableColumns, NTag,NButton,useModal } from 'naive-ui';
import { Ref, ref, watch } from 'vue';
import { SysJobLog } from '.';
import { fetchJodLogPage } from '@/service/api/sys/job'
import { usePageList } from '@/hooks';
import { isBusinessYse } from '@/utils/common';

defineOptions({ name: 'TaskLog' });

type Props = {
    visible : boolean,
    jodName : string
  }
const props = defineProps<Props>()
const visible = defineModel<boolean>('visible', {
  default: false
});
interface DataSource extends SysJobLog { }
const modal = useModal()
const columnResizable:boolean = true;

const columns: Ref<DataTableColumns<DataSource>> = ref([
    {
        title: '开始时间',
        key: 'createTime',
        align: 'center',
				resizable: columnResizable,
        ellipsis: {
					tooltip: true
				},
        sorter:true,
        width: 200,
    },
    {
        title: '状态',
        key: 'status',
        align: 'center',
        render (rowData: DataSource){
            const status = rowData.status
            const statusStr = isBusinessYse(status) ? "成功" : "失败"
            return <>
								<NTag type={isBusinessYse(status)? "success" : "error"}> {statusStr} </NTag>
							</>
        },
				resizable: columnResizable,
				resizable: columnResizable,
    },
		{
        title: '日志信息',
        key: 'jobMessage',
        align: 'center',
				resizable: columnResizable,
        ellipsis: {
					tooltip: true
				},
    },
		{
        title: '异常信息',
        key: 'exceptionInfo',
        align: 'center',
				ellipsis: {
					tooltip: true
				},
				resizable: columnResizable,
        render (rowData: DataSource){
          if(!isBusinessYse(rowData.status)){
            return <> <NButton quaternary round size="small" onClick={()=>handleCheckErr(rowData)}> 查看</NButton> </>
          }
        }
    }
]) as Ref<DataTableColumns<DataSource>> ;
const checkRows = ref<DataSource[]>([]);

const {
  startLoading,endLoading,
	loading,
	searchForm,
	list,
	pageObj,
	getList,
	handleQueryReset,
	handleQuery
 } = usePageList<DataSource>(
	initSearchFormData,
	fetchJodLogPage,
	beforeList,
	undefined
);
function initSearchFormData(){
  return {jobName: props.jodName}
}
function handleCheck(keys: Array<string | number>, rows: DataSource[]) {
    checkRows.value = rows
}
function handleCheckErr(row: DataSource){
  const modalInst = modal.create({
        title: '异常信息',
        content: row.exceptionInfo,
        preset: 'dialog'
      })
}

function beforeList(){
	checkRows.value=[];
}
watch(visible, () => {
  if (visible.value) {
    searchForm.value = initSearchFormData()
    handleQuery()
  }else{
  }
});
</script>

<style scoped></style>
